<template>
  <el-form class="filter-form-inline" label-position="right" label-width="110px" size="small">
    <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
      <el-col :lg="24" style="padding-left: 0;padding-right: 0">
        <item-title title="基本信息" />
      </el-col>
      <el-col :lg="8" :xs="4">
        <el-form-item label="商销客户编号：" label-width="140px">
          <span>{{ formData?.sellerNumber }}</span>
        </el-form-item>
      </el-col>
      <el-col :lg="8" :xs="4">
        <el-form-item label="企业所在地区：">
          <tool-tip :title="`${formData?.provinceName}/${formData?.cityName}/${formData?.areaName}`" />
        </el-form-item>
      </el-col>
      <el-col :lg="8" :xs="4">
        <el-form-item label="详细地址：">
          <span>{{ formData?.address }}</span>
        </el-form-item>
      </el-col>
      <el-col :lg="8" :xs="4">
        <el-form-item label="统一社会信用代码：" label-width="140px">
          <span>{{ formData?.creditCode }}</span>
        </el-form-item>
      </el-col>
      <el-col :lg="8" :xs="4">
        <el-form-item label="联系人：">
          <span>{{ formData?.userName }}</span>
        </el-form-item>
      </el-col>
      <el-col :lg="8" :xs="4">
        <el-form-item label="联系电话：">
          <span>{{ formData?.tel }}</span>
        </el-form-item>
      </el-col>

      <el-col :lg="8" :xs="4" >
        <el-form-item label="创建人：" label-width="140px">
          <span>{{ formData?.creatorName }}</span>
        </el-form-item>
      </el-col>
      <el-col :lg="8" :xs="4">
        <el-form-item label="创建时间：">
          <span>{{ dateFormat("yyyy-mm-dd HH:MM:SS", formData?.createdAt) }}</span>
        </el-form-item>
      </el-col>

      <template v-if="formData?.files && formData?.files.length > 0">
        <el-col :lg="24" style="padding-left: 0;padding-right: 0">
          <item-title title="资质信息" />
        </el-col>
        <el-col :lg="24">
          <div class="qualityFiles-container">
            <div v-for="(item,index) in formData?.files" :key="index" class="file-item">
              <image-upload-view ref="imageUploadView" :data="item" disabled="true" />
            </div>
          </div>
        </el-col>
      </template>

      <el-col :lg="24" style="padding-left: 0;padding-right: 0">
        <item-title title="修改记录" />
      </el-col>
      <el-col :lg="24">
        <operation-view :id="id" mode="seller" />
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { inject, reactive, toRefs, watch } from "vue";

export default {
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  setup(props, context) {
    const api = inject("api");
    const data = reactive({
      formData: props.detail,
    });
    // 获取详情
    const handlDetail = (id) => {
      api.shangPin.SHANGPIN_DETAILS(id).then((res) => {
        if (res.code === 0) {
          data.formData = res.data.data;
        }
      });
    };
    watch(
      () => props.id,
      (newval, oldval) => {
        if (newval) {
          handlDetail(newval);
        }
      },
      { immediate: true }
    );
    return {
      ...toRefs(data),
    };
  },
};
</script>

<style lang="scss" scoped>
.qualityFiles-container {
  display: flex;
  flex-wrap: wrap;
}
</style>

